<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆界面</title>
    <!-- 引入bootstrap.css  ctrl+/ -->
    <link rel="stylesheet" href="/boot/plugins/bootstrap/css/bootstrap.css">
    <style>
        #nav_img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            padding: 2px;
        }

        #login_div{
            width: 500px;
            height: 400px;
            backdrop-filter: blur(5px);
            background-color: rgba(255,255,255,0.5);
            /* 设置边框的阴影 */
            box-shadow: 6px 7px 9px 0px #999;

            /* 设置边框的四个角的圆润 */
            border-radius: 10px;

            /* 外边距 */
            margin-top: 150px;
            margin-right: 200px;
            /* 内填充 */
            padding-top: 40px;
        }
        body{
            background: url("../../imgs/login_bj.webp") no-repeat;
            background-size: cover;
        }
        .modal fade{
            margin-top: 100px;
        }
    </style>
</head>
<body>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">邮箱登录入口</h4>
            </div>
            <div class="modal-body">
                <!-- 表单begin -->
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="email" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" id="email" placeholder="请输入邮箱">
                            <span style="display: none" id="email_error" class="text-danger">sorry,email不存在</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="code" class="col-sm-2 control-label">验证码</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" id="code" placeholder="请输入验证码">
                        </div>
                        <div class="col-md-2" style="margin-left: -28px;">
                            <button id="code_btn" type="button" class="btn btn-success">发送验证码</button>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="button" id="login_btn" class="btn btn-default">登录</button>
                        </div>
                    </div>
                </form>
                <!-- 表单end -->
            </div>
            <div class="modal-footer">

            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- 登录表单begin -->
<div class="container" id="login_div">
    <div class="row">
        <form class="form-horizontal" role="form" style="margin-top: 10px">
            <div class="form-group has-feedback">
                <label for="firstname" class="col-md-3 control-label">用户名</label>
                <div class="col-md-7">
                    <input type="text" class="form-control" id="firstname" placeholder="请输入用户名">
                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
                </div>
            </div>
            <div class="form-group has-feedback">
                <label for="lastname" class="col-md-3 control-label">密码</label>
                <div class="col-md-7">
                    <input type="password" class="form-control" id="lastname" placeholder="请输入密码">
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>
            </div>
            <div class="form-group" style="margin-top: 15px">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
<!--                        <a href="#" >邮箱登录</a>-->
                        邮箱登录
                    </button>
                    <button type="submit" class="btn btn-default">登录</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 登录表单end -->


<!-- 因为bootstrap依赖于jquery,必须先引入jquery -->
<script src="/boot/plugins/jquery/jquery.min.js"></script>
<!-- 引入bootstrap.js -->
<script src="/boot/plugins/bootstrap/js/bootstrap.js"></script>
<script>
    //1.发送验证码的单击事件
    $("#code_btn").click(function(){
        //1.获取Email文本框中输人的数据
        let email=$("#email").val();
        //let email=document.querySelector("#email").value;
        //2.发送ajax请求
        let url="/boot/user/sendCode?email="+email;
        //通过JS获取到span标签
        let span=document.querySelector("#email_error");
        $.get(url,function (res){
            //res是后端返回过来的json对象
            console.log(res)
            if(res.code=='404'){
                //js操作样式，让span的内部错误信息显示
                span.style.display="";
            }else{
                span.style.display="none"
            }
        })
    })
    //2.登录按钮的单击事件
    $(function(){
        $("#login_btn").click(function(){
            //1.获取验证码文本框中输入的数据
            let code=$("#code").val();
            let email=$("#email").val();
            //2.post请求
            let url='/boot/user/login';
            //post请求支持json对象
            let data ={code:code,email:email};
            $.post(url,data,function(res){
                if(res.code=='200'){
                    let user = res.data;//user对象
                    //将user对象中的username存储到本地存储中
                    localStorage.setItem("uname",user.username);
                    //跳转到首页

                    window.location='/boot/views/index.html'
                }else{
                    alert("验证码输入不正确!")
                }
            })
        })
    })
</script>
</body>
</html>